<!--
*@Author: QWP
*@Description: 政策性文件
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <u-search-header>
      <a-row class="f-margin-b10">
        <a-input-search
          v-model:value="searchF.model.option"
          placeholder="文件名、发文部门"
          enter-button
          style="width: 30%"
          @search="onSearch"
        />
      </a-row>
    </u-search-header>
    <a-layout-content class="f-padding-rl24">
      <u-table
        :columns="columns"
        :data="tabData"
        v-model:pagination="pagenation"></u-table>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit v-model:open="showEdit"
    wrap-class-name="full-modal"/>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { Button, ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import Edit from './Edit.vue'
import { cloneDeep } from 'lodash'
const route = useRoute();
const router = useRouter();

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`
})
const searchF = reactive({
  model: {
    option: "",
    fwzh1: "",
  },
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  { label: "关键字", key: "option", element: "input", col: { span: 4 }, formItemProps: formItemProps, },
];

// 列表
const tabData = reactive([
  { a: "安全生产培训机构基本条件", b: "教育训练处", b1: '无', b2: '2024-05-14', b3: '已读' },
  { a: "四川省应急管理厅地质灾害应急处置项目实施意见", b: "四川省应急管理厅", b1: '无', b2: '2024-04-25', b3: '已读' },
  { a: "四川省安全生产行政处罚裁量权基准", b: "四川省应急管理厅", b1: '无', b2: '2024-01-09', b3: '未读' },
  { a: "四川省安全生产行政执法“一目录、五清单”", b: "执法局", b1: '无', b2: '2023-12-22', b3: '未读' },
  { a: "四川省安全工程技术人员高级职称申报评审基本条件", b: "规划财务处", b1: '无', b2: '2023-12-12', b3: '已读' },
 
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "a", title: "文件名称", minWidth: 150 },
  { dataIndex: "b", title: "发文部门", minWidth: 150 },
  { dataIndex: "b1", title: "文号", width: 150, align: 'center' },
  { dataIndex: "b2", title: "发文时间", width: 150, align: 'center' },
  { dataIndex: "b3", title: "阅读状态", width: 100, align: 'center',
    customRender: ({ text }) => {
      let color = { '已读': '#67c23a', '未读': '#e6a23c' }
      return h('span', { style: { color: color[text] } }, text)
    }
  },
  { dataIndex: "b2", title: "查看", width: 100, align: 'center',
    customRender: ({  }) => {
      return h(Button, { type: 'link', onClick: () => showEdit.value = true }, '查看详情')
    }
  },
]);

// 编辑
let showEdit = ref<boolean>(false)

const onSearch = () => {}

</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
